<template>
  <div>
    <div class="NewDiv">
      <h1 style="margin: 1% 0px 1% 1%">供应商管理</h1>
      <div class="Prompt" v-show="state">
        <span class="spanLeft">请填写供应商名称</span>
        <span
          class="iconfont icon-closel spanRight"
          @click="state = !state"
        ></span>
      </div>
      <div class="Returns">
        <hr style="margin: 0 auto; width: 98%" />
        <el-button
          class="iconfont icon-fanhui"
          style="margin-left: 1%"
          @click="toSupplier"
          >返回</el-button
        >
      </div>

      <div class="inputcontent">
        <div class="inputdiv">
          <h4>类型</h4>
          <el-select
            v-model="addData.types_title"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in TypeData"
              :key="item.types_title"
              :label="item.types_title"
              :value="item.types_title"
            >
            </el-option>
          </el-select>
        </div>
        <div class="inputdiv">
          <h4>状态</h4>
          <el-select
            v-model="addData.status_value"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in StateData"
              :key="item.status_value"
              :label="item.status_value"
              :value="item.status_value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="inputdiv">
          <h4>供应商名称</h4>
          <el-input
            v-model="addData.supplier_name"
            placeholder="如：魔方动力软件有限公司"
          ></el-input>
        </div>
        <div class="inputdiv icons">
          <h4>供应商简拼</h4>
          <el-input
            v-model="addData.abbreviations"
            placeholder="如: MFDL"
          ></el-input>
        </div>
        <div class="inputdiv icons">
          <h4>供应商类型</h4>
          <el-input
            v-model="addData.supplier_type"
            placeholder="如: 合作伙伴、供应商、竞争者..."
          ></el-input>
        </div>
        <div class="inputdiv icons">
          <h4>供应商标签</h4>
          <el-input
            v-model="addData.lable"
            placeholder="如: 软件、科技、外包..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>供应商级别</h4>
          <el-select
            v-model="addData.level_name"
            clearable
            placeholder="请选择级别"
          >
            <el-option
              v-for="item in RankData"
              :key="item.level_name"
              :label="item.level_name"
              :value="item.level_name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="inputdiv">
          <h4>供应商属性</h4>
          <el-input
            v-model="addData.attributes"
            placeholder="如: 意向供应商、合作供应商..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>供应商状态</h4>
          <el-input
            v-model="addData.status"
            placeholder="如: 潜在、有意向、失败、已成交..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>供应商来源</h4>
          <el-input
            v-model="addData.source"
            placeholder="如: 电话来访、供应商介绍..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>所属行业</h4>
          <el-input
            v-model="addData.industry"
            placeholder="如: 软件科技、食品加工..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>公司性质</h4>
          <el-input
            v-model="addData.company_nature"
            placeholder="如: 国有企业、民营企业..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>员工数量</h4>
          <el-input
            v-model="addData.emp_number"
            placeholder="如: 50人以下、50-100人..."
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>营业执照</h4>
          <el-input
            v-model="addData.license"
            placeholder="如: 110108001885980"
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>公司网址</h4>
          <el-input
            v-model="addData.company_web"
            placeholder="如: http://www.mojocube.com/"
          ></el-input>
        </div>
        <div class="inputdiv">
          <h4>供应商备注</h4>
          <el-input v-model="addData.note"> </el-input>
        </div>
        <hr />
        <div class="inputdiv">
          <h4>联系人</h4>
          <el-input v-model="addData.contact_name"> </el-input>
        </div>
        <div class="inputdiv">
          <h4>手机号码</h4>
          <el-input v-model="addData.mobilephone"> </el-input>
        </div>
        <hr />
        <div class="inputdiv">
          <h4>请输入省市</h4>
          <el-input v-model="addData.provinces"> </el-input>
        </div>
        <div class="inputdiv">
          <h4>请输入详细地址</h4>
          <el-input v-model="addData.address"> </el-input>
        </div>
      </div>

      <div class="rtf">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
      </div>
      <div class="soleFn">
        <el-button
          style="background-color: #208adb; color: #fff"
          @click="saveInput"
          >保存</el-button
        >
        <el-button @click="cancelInput">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import {
  QueryType,
  QueryState,
  QueryRank,
  SaveNew,
} from "../../utils/api/request.js";
import {
  createEditor,
  createToolbar,
  IEditorConfig,
  IDomEditor,
} from "@wangeditor/editor";
export default {
  data() {
    return {
      //提示开关
      state: false,
      //请求新增的数据
      addData: {
        abbreviations: "",
        address: "",
        attributes: "",
        company_nature: "",
        company_web: "",
        contact_name: "",
        dept_title: "",
        emp_number: "",
        employee_real_name: "",
        id: 0,
        industry: "",
        lable: "",
        level_name: "",
        license: "",
        mobilephone: "",
        note: "",
        provinces: "",
        source: "",
        status: "",
        status_value: "",
        supplier_name: "",
        supplier_type: "",
        types_title: "",
        employee_real_name: "nick",
      },
      //默认类型数据
      TypeData: [],
      //默认状态数据
      StateData: [],
      //默认级别数据
      RankData: [],
    };
  },
  // computed: {
  //   tableData() {
  //     console.log(this.$store);
  //     return this.$store.state.user;
  //   },
  // },
  mounted() {
    //富文本方法调用
    this.editor();
    this.QueryTypes();
    this.QueryStates();
    this.QueryRanks();
  },
  methods: {
    //请求类型默认值
    QueryTypes() {
      QueryType().then((data) => {
        this.TypeData = data.data.data;
      });
    },
    //请求状态默认值
    QueryStates() {
      QueryState().then((data) => {
        this.StateData = data.data.data;
      });
    },
    //请求级别默认值
    QueryRanks() {
      QueryRank().then((data) => {
        this.RankData = data.data.data;
      });
    },
    //保存判断input是否为空弹出提示/发起请求
    saveInput() {
      SaveNew(this.addData).then((data) => {
        console.log(data);
        console.log(this.addData);
      });
    },
    //取消清空input并返回
    cancelInput() {
      this.$router.push("/supplier");
    },
    //富文本方法
    editor() {
      //【注意】下面使用的 typescript 语法。如用 javascript 语法，把类型去掉即可。

      const editorConfig = {};
      editorConfig.placeholder = "请输入内容";
      editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        // console.log("content", editor.children);
        // console.log("html", editor.getHtml());
      };

      // 创建编辑器
      const editor = createEditor({
        selector: "#editor-container",
        config: editorConfig,
        mode: "default", // 或 'simple' 参考下文
      });
      // 创建工具栏
      const toolbar = createToolbar({
        editor,
        selector: "#toolbar-container",
        mode: "default", // 或 'simple' 参考下文
      });
    },
    //返回
    toSupplier() {
      this.$router.push("/supplier");
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

.inputcontent {
  width: 100%;
  // height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .el-select {
    height: 80px;
    width: 100%;
  }
  .inputdiv {
    height: 80px;
    width: 48%;
  }
}

.NewDiv {
  margin: 0 auto;
  width: 98%;
  border: 1px solid red;
  //分割线
  hr {
    width: 98%;
    border: 1px solid #d2d6de;
    margin: 30px auto;
    box-sizing: border-box;
  }
  //供应商公司信息类
  .demo-form-inline {
    .el-form-item {
      .el-select {
        width: 90%;
        padding: 0px 10px;
      }
      h4 {
        width: 90%;
        display: block;
        text-align: left;
        padding-left: 12px;
      }
      .el-input {
        width: 1000px;
        padding: 0px 10px;
      }
    }
  }
  .Returns {
    border: 1px solid red;
    width: 100%;
    height: 50px;
    .el-button {
      padding: 10px;
      background-color: #6c7b8b;
      color: #fff;
      font-weight: bold;
      float: left;
      margin: 6px;
      margin-left: 20px;
    }
  }
}
//富文本
.rtf {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
  #toolbar-container {
    width: 100%;
    border: 1px solid #cccccc;
  }
  #editor-container {
    width: 100%;
    height: 500px;
    border: 1px solid #cccccc;
  }
}
//取消保存
.soleFn {
  margin: 0 auto;
  margin-top: 50px;
  width: 100%;
  height: 80px;
  border: 1px #f4f4f4 solid;
  // border: 1px solid red;
  line-height: 80px;
  box-sizing: border-box;
  .el-button {
    padding: 15px;
    margin-left: 1%;
  }
}
//提示
.Prompt {
  width: 98%;
  margin: 0 auto;
  background-color: #dd4b39;
  color: #fff;
  height: 70px;
  margin-bottom: 1%;
  line-height: 70px;
  .spanLeft {
    float: left;
    margin-left: 1%;
  }
  .spanRight {
    float: right;
    margin-right: 1%;
    color: #b13c2e;
  }
}
</style>